<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/7/13
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("li").mouseover(function(event){
                $("#d1").show();
                // let id = $(this).attr("data-id");
                <%--$.get("${pageContext.request.contextPath}/findById.product?id="+id,--%>
                    <%--function(result){--%>
                        <%--console.log(result);--%>
                    <%--},"json");--%>

                // 该方法就是$.get方法,只是第四个参数写死了为json
                // 相当于$.get(url,[data],callback,"json")
                // $.getJSON(url,[data],callback);
                <%--$.getJSON("${pageContext.request.contextPath}/findById.product?id="+id,--%>
                    <%--function(result){--%>
                        <%--console.log(result);--%>
                    <%--});--%>

                <%--$.post("${pageContext.request.contextPath}/findById.product",--%>
                    <%--{"id":id},--%>
                    <%--function(result){--%>
                        <%--console.log(result);--%>
                    <%--},"json");--%>
                $.ajax({
                    // 指定请求方式,默认为get
                    type:"post",
                    // 请求地址
                    url:"${pageContext.request.contextPath}/findById.product",
                    // 请求参数
                    data:{"id":$(this).attr("data-id")},
                    // 响应数据类型,默认为text
                    dataType:"json",
                    // 响应成功之后调用的回调函数
                    // 相当于xhr.readyState == 4 & xhr.status == 200
                    success:function(product){
                        console.log(product);
                        $("#d1").css("left",event.clientX);
                        $("#d1").css("top",event.clientY);
                        $("#s1").html(product.id);
                        $("#s2").html(product.name);
                        $("#s3").html(product.price);
                    },
                    // 响应失败之后调用的回调函数
                    error:function(){

                    }
                })
            });

            $("li").mouseout(function(){
                $("#d").hide();
            });
        })
    </script>
</head>
<body>
<!--
    需求一:查询所有商品
        查询所有商品信息,直接使用传统web请求来实现
        查询购物车中商品表的数据,页面中展示所有的商品名
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li data-id="${product.id}">${product.name}</li>
    </c:forEach>
</ul>
<!--
    需求二:展示商品详情
        使用Ajax实现该功能,当鼠标悬停在某一个商品名的选项上时
        在鼠标旁边展示该商品的详细信息
        鼠标离开商品后,信息隐藏
-->
<hr>
<div id="d1" style="background: #dddddd; width: 200px; padding: 10px;display: none;position:absolute;">
    商品编号:<span id="s1"></span><br>
    商品名称:<span id="s2"></span><br>
    商品单价:<span id="s3"></span><br>
</div>
</body>
</html>
